import React,{useState} from 'react'
import {View, StyleSheet, Button, Text, Image, ScrollView, ImageBackground} from 'react-native';
import TouchableView from '../components/touchableView';
import Images from '../images/Images';
import screen from '../utils/screen';
import {ThemeColor} from '../utils/common';
import {useNavigation} from '@react-navigation/native';

const SelectMaterial = ({navigation,onClose})=>{


    const renderModule = (bg,icon,title,titleColor,style,onPress)=>{
        return (
            <TouchableView
                style={[style]}
                onPress={()=>{
                    onClose()
                    onPress()
                }}
            >
                <ImageBackground
                    source={bg}
                    style={styles.module}
                >

                    <Image source={icon} style={styles.leftImg} resizeMode={'contain'}/>
                    <Text style={[styles.moduleTitle,{color:titleColor}]}>{title}</Text>
                    <Image source={Images.right2} style={styles.right} resizeMode={'contain'}/>

                </ImageBackground>

            </TouchableView>
        )
    }

    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <View style={styles.icon}/>
                <Text style={{color:'#333',fontSize:20,fontWeight:'500',alignSelf:'center'}}>选择材料来源</Text>
                <TouchableView
                    style={styles.closeBtn}
                    onPress={onClose}
                >
                    <Image source={Images.close} style={styles.close} resizeMode={'contain'}/>
                </TouchableView>
            </View>
            <ScrollView
                contentContainerStyle={{paddingTop:30,paddingHorizontal:10}}
            >
                {renderModule(
                    Images.createBg,Images.create_icon,
                    '创建材料','#1F3F64',
                    null,
                    ()=>{
                        navigation.navigate('Auth')
                    }
                )}
                <Text style={styles.tips}>* 创建一份新的数字资产作为材料提交</Text>

                {renderModule(Images.import_bg,Images.import_icon,
                    '导入材料','#815033',
                    {marginTop: 30},
                    ()=>{
                        navigation.navigate('AddAssets')
                    }
                )}
                <Text style={styles.tips}>* 导入本地数字资产加密文件，导入过程不会产生链上记录</Text>

                {renderModule(Images.send_bg,Images.send_icon,'接收资产','#1F465F',
                    {marginTop: 30},
                    ()=>{
                        navigation.navigate('SendAssets')
                    }
                )}
                <Text style={styles.tips}>* 接收来自其他账户的数字资产，接收记录上链</Text>

            </ScrollView>
        </View>
    )
}

export default SelectMaterial

const styles = StyleSheet.create({
    container:{
        flex:1, backgroundColor:'#fff', marginTop:200,borderTopRightRadius:20,borderTopLeftRadius:20,
        paddingTop:20
    },
    header:{
        flexDirection:'row',alignItems:'center',justifyContent:'space-between'
    },
    leftImg:{
        width:screen.PIXEL_72,height:screen.PIXEL_72
    },
    icon:{
        width:30,height:30,justifyContent: 'center',alignItems:'center'
    },
    closeBtn:{
        width:30,height:30,justifyContent: 'center',alignItems:'center'
    },
    close:{
        width:20,height:20
    },
    right:{
        width:20,height:20
    },
    module:{
        height:screen.PIXEL_140,flexDirection: 'row',paddingHorizontal:screen.PIXEL_40,
        alignItems: 'center',justifyContent:'space-between'
    },
    moduleTitle:{
        flex:1,fontSize:16,marginLeft:10,fontWeight:'500'
    },
    tips:{
        fontSize: screen.PIXEL_24,color:'#333',marginTop: 4
    }
})
